<template>
    <modal-view title="评审测试报告" @close="showModal = false" @save="handleSave" v-if="showModal">
        <div class="page-wrap" v-loading="loading">
            <div class="page-cont" v-if="detailData.id">
                <iframe id="myIframe" :src="url" frameborder="no" />
            </div>
        </div>
        <template #footer>
            <a-form layout="inline" ref="ruleFormRef" :model="form" :rules="rules">
                <a-row>
                    <a-col :span="16">
                        <a-form-item label="审核意见" name="opinion">
                            <div style="width: 100%">
                                <a-textarea v-model:value="form.opinion" showCount :maxlength="500" auto-size />
                            </div>
                        </a-form-item>
                    </a-col>
                </a-row>
            </a-form>
        </template>
    </modal-view>
</template>

<script lang="ts">
import ModalView from './ModalView.vue';
import { message } from 'ant-design-vue';
import api from '@/api';
import store from '@/store';
import { defineComponent, ref, unref, reactive, toRefs, computed, getCurrentInstance, onBeforeUnmount, nextTick } from 'vue';
export default defineComponent({
    name: 'VersionDetail',
    components: {
        ModalView
    },
    emits: ['success'],
    setup(_, { emit }) {
        const instance: any = getCurrentInstance();
        const state = reactive<any>({
            form: {
                opinion: ''
            },
            loading: false,
            detailData: {},
            showModal: false,
            url: ''
        });
        const ruleFormRef = ref<any>();
        const rules = {
            opinion: [{ required: true, message: '审核意见不能为空', trigger: 'change' }]
        };
        const empId = computed(() => {
            return store.getters.userInfo.employeeDTO.empId;
        });
        const getFileUrl = async () => {
            const file = state.files[state.files.length - 1];
            const formData = new FormData();
            formData.append('url', file.url);
            formData.append('type', 'version');
            formData.append('operation', 'read');
            const { moule, success } = await api.acmdbModel.previewByWPS(formData);

            state.showModal = true;

            nextTick(() => {
                const ifm: any = document.getElementById('myIframe');
                const modalBody: any = document.getElementsByClassName('xr-create__body')[0];
                ifm.height = modalBody.clientHeight - 30;
                ifm.width = modalBody.clientWidth;
            });

            if (success) {
                state.showModal = true;
                state.url = moule;
                // state.url =
                //     'http://wpsxc.dwstock.com:8484/docs/viewweb/reader/version_11744?_w_filecode=8f06158a895d86b4ea69a042e683adce&_w_scene_id=version_11744&_w_third_appid=AK20221128GPWEOE&_w_third_file_id=version_11744&_w_third_url=http%3A%2F%2F58.210.86.53%3A20034%2Fcommon%2FwpsDownloadFile%3FfileName%3Da5b3eb40e430412db9e2961b1cb9fb85_%2525E9%25259B%252586%2525E4%2525B8%2525AD%2525E4%2525BA%2525A4%2525E6%252598%252593-a2-%2525E6%2525B5%25258B%2525E8%2525AF%252595%2525E6%25258A%2525A5%2525E5%252591%25258A.docx';
                // window.open(state.url);
            } else {
                message.error('文件不存在');
            }
        };
        const open = (detail = {}) => {
            state.detailData = { ...detail };
            state.files = state.detailData.files.filter((item) => item.connectType === '测试报告');
            if (state.files && state.files.length) {
                getFileUrl();
            } else {
                message.error('暂无测试报告');
            }
        };

        const handleSave = async () => {
            unref(ruleFormRef)
                .validate()
                .then(() => {
                    const query = { ...state.detailData, ...state.form };
                    api.productProcessModel
                        .auditProcess({
                            ...query
                        })
                        .then(({ success, errorMsg }) => {
                            if (success) {
                                message.success('评审成功');
                                emit('success');
                                state.showModal = false;
                            } else {
                                message.error(errorMsg);
                            }
                        });
                });
        };
        onBeforeUnmount(() => {
            instance.proxy.$mitt.all.delete('updateVersionDetail');
        });
        return {
            ...toRefs(state),
            empId,
            open,
            handleSave,
            ruleFormRef,
            rules
        };
    }
});
</script>
<style lang="less" scoped >
.page-wrap {
    position: relative;
    height: 100%;
    .page-cont {
        position: relative;
        background: #fff;
    }
}
</style>